<script lang="ts" setup>
import useLoading from '@/hooks/loading'
import { TitleMap } from '@/config/constants'
import type { FormInstance } from '@arco-design/web-vue/es/form'
import MyApp from '@/components/MyApp/index.vue'

interface EditProps {
  modelForm: any
  editVisible: boolean
  createData: any
  updateData: any
  categoryOptions: any
  setEditVisible: any
  title?: string
  dialogStatus: string
}

const props = withDefaults(defineProps<EditProps>(), {
  editVisible: false,
  modelForm: {
    title: '',
    description: '',
  },
  title: '一个兵',
  columns: [],
  dialogStatus: 'create',
  createData: () => {},
  updateData: () => {},
  categoryOptions: [],
  setEditVisible: () => {},
})
const { loading, setLoading } = useLoading()

const modelForm = reactive({
  visible: false,
})

const visible = computed({
  get: () => props.editVisible,
  set: (val) => {
    modelForm.visible = val
  },
})
const state = computed(() => props.modelForm)
const modelFormRef = ref<FormInstance>()
const handleClose = () => {
  props.setEditVisible()
  modelFormRef.value!.resetFields()
}

const handleSubmit = () => {
  modelFormRef
    .value!.validate((valid: any) => {
      if (valid) return
      props.dialogStatus === 'create' ? props.createData(unref(state)) : props.updateData(unref(state))
      handleClose()
    })
    .catch((error: any) => {
      console.log('error', error)
    })
    .finally(() => {
      setLoading(false)
    })
}
</script>
<template>
  <a-modal v-model:visible="visible" @ok="handleSubmit" :width="400" @cancel="handleClose" draggable :loading="loading">
    <template #title>{{ TitleMap[dialogStatus] }}</template>
    <a-form ref="modelFormRef" :model="state" label-width="50px">
      <a-form-item field="id" no-style>
        <input type="hidden" name="id" :value="state.id" />
      </a-form-item>
      <a-form-item label="应用" field="appId">
        <MyApp v-model="state.appId" :style="{ width: '220px' }" />
      </a-form-item>
      <a-form-item label="名称" field="tagName" :rules="[{ required: true, message: '请输入名称' }]" :validate-trigger="['change', 'blur']">
        <a-input :style="{ width: '220px' }" v-model="state.tagName" placeholder="请输入名称" />
      </a-form-item>
    </a-form>
  </a-modal>
</template>
<style lang="scss"></style>
